<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 管道符| 前面是要处理的值 这个值交给后过滤器进行处理 调用多个过滤器  依次把前面过滤器处理的结果交给后面过滤器处理
        直到最后一个过滤器调用处理的结果放到当前插值位置渲染出来 -->
      <!-- 最终渲染的结果是最后一个过滤器函数的返回值 -->
      <p>{{ msg | msgFormat( '疯狂+1', '123' ) | test( '456', '789' ) }}</p>
    </div>

    <script type="text/javascript">
      // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
      Vue.filter("msgFormat", function(msg, arg, arg2) {
        // 字符串的 replace 方法， 第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return msg.replace(/单纯/g, arg + arg2);
      });

      Vue.filter("test", function(msg, arg, arg2) {
        return msg + "=====" + arg + arg2;
      });

      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          msg:
            "曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人"
        },
        methods: {}
      });
    </script>
  </body>
</html>
